<template>
    <div class="Aside_BG">
        <el-menu default-active="" router class="Aside_Menu" :collapse="props.SHOWFLAG">
            <div class="Aside_Tittle">
                <img @click="Ciallo" :class="{ AsideLogoNOT: props.SHOWFLAG }" class="Aside_Logo"
                    :src="CSSMode ? lightimg : darkimg" />
            </div>
            <!-- 食品信息管理 -->
            <el-sub-menu class="Aside-Sub-Menu" index="食品信息管理">
                <template #title>
                    <el-icon>
                        <Apple />
                    </el-icon>
                    <span>食品信息管理</span>
                </template>
                <el-menu-item class="Aside-Sub-Menu-item" index="/home/allfoodmessage">
                    <el-icon>
                        <Watermelon />
                    </el-icon>
                    <template #title>获取所有食品的最新溯源信息</template>
                </el-menu-item>
                <el-menu-item class="Aside-Sub-Menu-item" index="/home/nowfoodmessage">
                    <el-icon>
                        <Pear />
                    </el-icon>
                    <template #title>获取某个食品的当前信息</template>
                </el-menu-item>
            </el-sub-menu>

            <!--用户管理 -->
            <el-menu-item class="Aside-Menu-item" index="/home/usersetting">
                <el-icon>
                    <User />
                </el-icon>
                <template #title>用户管理</template>
            </el-menu-item>

            <!-- 会话管理 -->
            <el-menu-item class="Aside-Menu-item" index="/home/chatsetting">
                <el-icon>
                    <Message />
                </el-icon>
                <template #title>会话管理</template>
            </el-menu-item>

            <!-- 更新日志管理 -->
            <el-menu-item class="Aside-Menu-item" index="/home/updatelog">
                <el-icon>
                    <Document />
                </el-icon>
                <template #title>更新日志管理</template>
            </el-menu-item>

            <!-- 资源库管理 -->
            <el-sub-menu class="Aside-Sub-Menu" index="资源库管理">
                <template #title>
                    <el-icon>
                        <Histogram />
                    </el-icon>
                    <span>资源库管理</span>
                </template>
                <el-menu-item class="Aside-Sub-Menu-item" index="/home/resourcefirstD">
                    <el-icon>
                        <Histogram />
                    </el-icon>
                    <template #title>一级目录管理</template>
                </el-menu-item>
                <el-menu-item class="Aside-Sub-Menu-item" index="/home/resourcefirstC">
                    <el-icon>
                        <Histogram />
                    </el-icon>
                    <template #title>一级目录内容管理</template>
                </el-menu-item>
                <el-menu-item class="Aside-Sub-Menu-item" index="/home/resourcesecondD">
                    <el-icon>
                        <Histogram />
                    </el-icon>
                    <template #title>二级目录管理</template>
                </el-menu-item>
                <el-menu-item class="Aside-Sub-Menu-item" index="/home/resourcesecondC">
                    <el-icon>
                        <Histogram />
                    </el-icon>
                    <template #title>二级目录内容管理</template>
                </el-menu-item>
            </el-sub-menu>

            <!-- 管理员设置 -->
            <el-menu-item class="Aside-Menu-item" index="/home/rootsetting">
                <el-icon>
                    <Setting />
                </el-icon>
                <template #title>管理员设置</template>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script setup lang='js' name=''>
// 资源文件
import lightimg from "@/assets/img/Logo/Logo_light.png"
import darkimg from "@/assets/img/Logo/Logo_Dark.png"
import { inject } from 'vue'
import router from "@/router";
// 默认路由
const props = defineProps(['SHOWFLAG'])
// 数据文件
const CSSMode = inject("CSSMode")
function Ciallo() {
    router.push('/home/default')
}
</script>

<style scoped>
.Aside_BG {
    overflow: hidden;
    width: auto;
}

.Aside_Tittle {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #aaaaaa;
}

.Aside_Logo {
    width: 80%;
    height: auto;
    transition: all 0.5s;
    opacity: 1;
}

.AsideLogoNOT {
    opacity: 0;
}

.Aside_Menu {
    height: 100vh;
    transition: all 0.5s;
    background: var(--Home_AsideBG);
}

/* 改写所有文字 */
.Aside_Menu * {
    color: white;
    font-size: 16px;
}

/* 一层悬浮背景 */
.Aside_Menu>*:hover,
.Aside-Sub-Menu>*:hover {
    background: #262626 !important;
}

/* 二层背景 */
.Aside-Sub-Menu>*>.Aside-Sub-Menu-item {
    background: var(--Aside_BG);
}

.Aside-Sub-Menu>*>.Aside-Sub-Menu-item:hover {
    background: #181818;
}
</style>
<style>
.el-menu.el-menu--popup.el-menu--popup-right-start {

    background: var(--Aside_BG) !important;
}

.el-menu.el-menu--popup.el-menu--popup-right-start>*:hover {
    background: #2e2e2e !important;
}

.el-menu.el-menu--popup.el-menu--popup-right-start * {
    color: white !important;
}

.el-menu.el-menu--popup.el-menu--popup-right-start .is-active,
.el-menu.el-menu--popup.el-menu--popup-right-start .is-active * {
    color: #409eff !important;
}
</style>